<template>
<div>
  <div>
    <div class="user-item" v-for="user, index in usersList" @click="redirect(user.user_id)">
        <mu-paper :zDepth="2" class='user-list-paper'>
          <mu-row gutter>
            <mu-col desktop="30">
              <mu-avatar :size="90" :src="user.user_thumbnail"/>
            </mu-col>
            <mu-col desktop="70">
              <div>
                <span class="user user-name">
                  {{user.user_name}}
                </span>
                <span v-if="user.user_type ==1">系统</span>
                <span v-if="user.user_type ==2">用户</span>
              </div>
              <div class="user"><span>微信昵称：{{user.user_nickname}}</span><br/>
              <span>微信号：{{user.user_wechat_id}}</span></div>
            </mu-col>
          </mu-row>
        </mu-paper>
      </div>
    </div>
  </div>
</template>
<script>
  import SimpleImageUpload from '../../components/imageUpload/simple-image-upload.vue'
  import http from "../../http/http.js" 
  export default {
    data () {
      return {
        getUsersUrl:this.config.userUrl,
        usersList:{},
      }
    },
    components : {
      SimpleImageUpload
    },
    methods: {
      redirect:function(userId){
        this.$router.push('/usermanage/'+userId)
      }
    },
    mounted() {
      var that = this
      http.get(that.getUsersUrl)
      .then(function(response){
        that.usersList = response.data;
      })
      .catch(function(err){console.log(err)});
    },
  }
</script>

<style lang="css" scode>
/*.mu-dialog{
  width: 90%;
  height:95%;
  max-width: 100%;
  max-height:100%;
}*/
.user-item .mu-paper:hover {
  background: #F0F0F0;
}
.user-item{
  float: left;
  cursor: pointer;
  width: 333px;
}
.user-list-paper{
  padding:8px;
}

.picture-type-box{
  width:100px;
  height:56px;
  margin-top:20px;
}
.user-name{
  padding-top:10px;
  font-size: 24px;
  color: #9CA3CD;
  min-height: 25px;
}
</style>